<template>
  <div style="height:100%" class="workspace">
    <el-container
      class="blod"
      ref="listWarp"
      style="height: 100%;background-color:#fafafa;width: 1440px;margin: 0 auto"
    >
      <el-header class="toolbar-wap" style="height:auto;padding:0">
        <el-tabs v-model="activeName" @tab-click="handleChange">
          <el-tab-pane label="待我处理的" name="0">
            <el-row>
              <el-select
                v-model="systemCode"
                placeholder="请选择系统"
                size="small"
                value-key="code"
                style="width:200px;float:left"
                filterable
                clearable
                @change="handleType"
              >
                <el-option
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                  v-for="item in systemOptions"
                ></el-option>
              </el-select>
              <el-input
                placeholder="请输入搜索内容"
                clearable
                v-model="searchV"
                size="small"
                style="width:200px;margin-right: 15px;float:right"
                @change="searchName"
              >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                <span slot="empty">无数据</span>
              </el-input>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="我已处理的" name="1">
            <el-row>
              <el-select
                placeholder="请选择系统"
                v-model="systemCode"
                size="small"
                value-key="code"
                style="width:200px;float:left"
                filterable
                clearable
                @change="handleType"
              >
                <el-option
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                  v-for="item in systemOptions"
                ></el-option>
              </el-select>

              <el-date-picker
                style="float:left;width:250px;margin-left:10px"
                :editable="false"
                :clearable="true"
                size="small"
                v-model="deviceFormData.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="handlPicker"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <el-input
                placeholder="请输入搜索内容"
                clearable
                v-model="searchV"
                size="small"
                style="width:200px;margin-right: 15px;float:right"
                @change="searchName1"
              >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="我发起的" name="2"></el-tab-pane>
        </el-tabs>
      </el-header>
      <el-main
        style="height: 100%;box-shadow:none;padding:3px 0"
        class="page-main"
        v-if="activeName!='2'"
      >
        <el-table
          :data="tableData"
          v-loading="loading"
          border
          tooltip-effect="light"
          height="calc(100% - 52px)"
          style="width: 100%;"
          highlight-current-row
          @row-dblclick="tableDbEdit"
          @current-change="evtTableRowChange"
          @selection-change="handleSelectionChange"
          ref="dataListTable"
        >
          <el-table-column prop="index" label="序号" width="80" align="center" type="index"></el-table-column>
          <el-table-column
            v-for="col in columns.filter(item => item.visible )"
            :prop="col.prop"
            :label="col.label"
            :sortable="col.sortable"
            :resizable="col.resizable"
            :type="col.type"
            :show-overflow-tooltip="col.tooltip"
            :align="col.align"
            :width="col.width"
            :fixed="col.fixed"
            :key="col.prop"
          />
        </el-table>
        <el-footer style="height:50px;background-color:#fff;line-height: 30px;" class="page-footer">
          <el-pagination
            style="padding-top:10px;background-color:#fff;text-align: center;"
            background
            layout="prev, pager, next,jumper,total,sizes"
            @size-change="evtPageSizeChange"
            @current-change="evtPageCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[20, 50, 100, 500]"
            :total="totalRows"
          ></el-pagination>
        </el-footer>
      </el-main>
      <el-main style="height: 100%;box-shadow:none;padding:3px 0" class="page-main" v-else>
        <meStarted></meStarted>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { transactionApi } from "@/api/home/transaction";
import meStarted from "@/views/home/meStarted/index";
export default {
  name: "TransactionCenter",
  components: { meStarted },
  data() {
    return {
      systemCode: "",
      activeSystem: "site",
      searchValue: "",
      deviceFormData: {
        time: [],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      activeName: "0",
      teamId: "",
      systemOptions: null, //存放系统列表
      searchV: "",
      tableData: [],
      loading: false,
      columns: [],
      columnOther: [
        {
          prop: "statusName",
          label: "状态",
          visible: true,
          tooltip: true,
          align: "center",
          max: 30,
          width: 300,
        },
        {
          prop: "systemName",
          label: "系统",
          sortable: false,
          visible: true,
          tooltip: true,
          max: 100,
          width: 300,
        },
        {
          prop: "content",
          label: "内容",
          sortable: false,
          visible: true,
          tooltip: true,
          max: 100,
          width: 300,
        },
        {
          prop: "createTime",
          label: "时间",
          sortable: false,
          visible: true,
          tooltip: true,
          max: 100,
        },
      ],
      columnRepair: [
        {
          prop: "serialNumber",
          label: "报修单号",
          visible: true,
          tooltip: true,
          align: "center",
          max: 30,
          width: 200,
        },
        {
          prop: "statusName",
          label: "状态",
          visible: true,
          tooltip: true,
          align: "center",
          max: 30,
          width: 200,
        },
        {
          prop: "systemName",
          label: "系统",
          sortable: false,
          visible: true,
          tooltip: true,
          max: 100,
          width: 300,
        },
        {
          prop: "content",
          label: "内容",
          sortable: false,
          visible: true,
          tooltip: true,
          max: 100,
          width: 300,
        },
        {
          prop: "createTime",
          label: "时间",
          sortable: false,
          visible: true,
          tooltip: true,
          max: 100,
        },
      ],
      currentRow: null,
      multipleSelection: [],
      currentPage: 1,
      totalRows: 0,
      pageSize: 20,
    };
  },
  methods: {
    funLoadData() {
      this.loading = true;
      let startTime = "";
      let endTime = "";
      if (this.deviceFormData.time && this.activeName == "1") {
        startTime = this.deviceFormData.time[0];
        endTime = this.deviceFormData.time[1];
      }
      transactionApi
        .Transaction(
          this.activeSystem,
          this.currentPage,
          this.pageSize,
          this.activeName,
          this.searchValue,
          startTime,
          endTime
        )
        .then((res) => {
          if (res.status == "success") {
            this.tableData = res.data.rows;
            this.totalRows = res.data.total;
            this.loading = false;
          }
        });
    },
    handlPicker() {
      this.funLoadData();
    },
    handleChange(tab, event) {
      this.searchValue = "";
      this.searchV = "";
      this.deviceFormData.time = [];
      this.getTimeFn();
      this.funLoadData();
    },
    handleType(val) {
      this.activeSystem = val;
      if (this.activeSystem == "repair") {
        this.columns = this.columnRepair;
      } else {
        this.columns = this.columnOther;
      }
      this.funLoadData();
    },

    searchName(val) {
      this.searchValue = val;
      this.funLoadData();
    },
    searchName1(val) {
      this.searchValue = val;
      this.funLoadData();
    },
    searchName2(val) {
      this.searchValue = val;
      this.funLoadData();
    },
    evtPageSizeChange(val) {
      //每页数量
      this.pageSize = val;
      this.funLoadData();
    },
    evtPageCurrentChange(val) {
      //分页
      this.currentPage = val;
      this.funLoadData();
    },
    //
    tableDbEdit(currentRow) {},
    evtTableRowChange(currentRow) {},
    handleClick(currentRow) {
      //单选
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /**
     * 设置默认时间
     */
    getTimeFn() {
      const that = this;
      const end = new Date();
      const start = new Date();
      var nextDate = new Date(end.getTime() + 24 * 60 * 60 * 1000); //后一天
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
      this.$set(that.deviceFormData.time, 0, that.formatDate(start));
      this.$set(that.deviceFormData.time, 1, that.formatDate(nextDate));

      // that.deviceFormData.time[0] = that.formatDate(start);
      // that.deviceFormData.time[1] = that.formatDate(nextDate);
    },
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },
    // 获取系统列表
    GetsystemList() {
      transactionApi.systemList().then((res) => {
        this.systemOptions = res
          .filter((r) => r.code != "account")
          .filter((e) => e.code != "manager");

        // if (this.systemOptions.length > 0) {
        //   this.systemCode = "site";
        // }
      });
    },
  },
  created() {
    this.getTimeFn();
    this.GetsystemList();
    this.funLoadData();
  },
  mounted() {
    this.columns = this.columnOther;
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.workspace {
  ::v-deep .el-tabs__item:hover {
    color: #f34c15;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #f34c15;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #f34c15;
  }
  ::v-deep .el-tabs__header {
    background-color: #fafafa;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    // background: #fafafa !important;
    background-color: #fafafa;
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #f34c15;
  }
}
</style>

